import React, { Component } from 'react';
import { Layout, Menu, Icon } from "antd";
import { Link } from "react-router-dom";

const {Sider: AntSider} = Layout;
const {SubMenu} = Menu;


class Sider extends Component {
  render() {
    return (
      <AntSider>
        <Menu
          mode="inline"
          defaultOpenKeys={['sub1']}
          defaultSelectedKeys={['1']}
          style={{ height: '100%', borderRight: 0 }}
        >
          <SubMenu key="sub1" title={<span><Icon type="user" />subnav 1</span>}>
            <Menu.Item key="1"><Link to="/users">用户</Link></Menu.Item>
            <Menu.Item key="2"><Link to="/scenes">场景</Link></Menu.Item>
            <Menu.Item key="3"><Link to="/articles">文章</Link></Menu.Item>
            <Menu.Item key="4"><Link to="/goods">商品</Link></Menu.Item>
            <Menu.Item key="5"><Link to="/scenes/create">创建场景</Link></Menu.Item>
          </SubMenu>
          <SubMenu key="sub2" title={<span><Icon type="laptop" />subnav 2</span>}>
            <Menu.Item key="5">option5</Menu.Item>
            <Menu.Item key="6">option6</Menu.Item>
            <Menu.Item key="7">option7</Menu.Item>
            <Menu.Item key="8">option8</Menu.Item>
          </SubMenu>
          <SubMenu key="sub3" title={<span><Icon type="notification" />subnav 3</span>}>
            <Menu.Item key="9">option9</Menu.Item>
            <Menu.Item key="10">option10</Menu.Item>
            <Menu.Item key="11">option11</Menu.Item>
            <Menu.Item key="12">option12</Menu.Item>
          </SubMenu>
        </Menu>
      </AntSider>
    );
  }
}

export default Sider;
